<template>
  <div class="demo">
  <div class="demo-form">
      <el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="标签名称" class="num">
    <el-input v-model="form.tagName"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="form.state" placeholder="请选择">
      <el-option
       v-for="item in options"
      :key="item. value"
      :label="item. label"
      :value="item. value"
       />
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit" class="primary">清除</el-button>
    <el-button type="primary" @click="search">查询</el-button>
  </el-form-item>
</el-form>
 <div class="demo-inline">
      <div style="width: 50%;display: flex;flex-direction: row-reverse">
        <el-button
       size="small"
       type= "text"
       icon="el-icon-back"
       @click="buttonclick"
       v-if="routeValue !==''"
       >返回学科</el-button>
      </div>
    <div style="width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end">
      <el-button type= "success" icon="el-icon-edit" size="small" @click="tagsAdd" >新增标签</el-button>
    </div>
 </div>
    <div class="page-tools">
        <div class="tips">
          <i class="el-icon-info" />
          <span style="font-size: 15px;color: #aaa;">{{this.titles}}</span>
        </div>
    </div>
  </div>
<el-card style="margin-top: 10px;" v-loading="isLoading">
  <el-table :data="tableData">
    <el-table-column label="序号" type="index" :index="indexMetho"/>
    <el-table-column label="所属学科" prop="subjectName" />
    <el-table-column label="标签名称" prop="tagName" />
    <el-table-column label="创建者" prop="username" />
    <el-table-column label="创建日期" prop="addDate" >
      <template #default="{row}">
        {{formateTimeFn(row.timeOfEntry)}}
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="state" >
      <template #default="{row}">
        {{row.state?'已启用':'已禁用'}}
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="280">
      <template #default="{row}">
        <el-button type="text" size="small" @click="num(row)">
          {{row.state?'禁用':'启用'}}
        </el-button>
        <el-button type="text" size="small" @click="uptade( row)" :disabled="Boolean(row.state)">修改</el-button>
        <el-button type="text" size="small" @click="removeapi(row)" :disabled="Boolean(row.state)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="height: 60px; margin-top: 10px; display: flex;justify-content: flex-end;">
    <div class="block">
    <span class="demonstration"></span>
    <el-pagination

      :current-page="form.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"

      @current-change="handleCurrentChange">
    </el-pagination >
    <tagsAdd :show-dialog.sync="showDialog" class="tank" ref="ref"/>

  </div>
  </div>
</el-card>

  </div>
</template>
<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import { status } from '@/api/hmmm/constants.js'
import tagsAdd from '@/module-hmmm/components/tags-add.vue'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      titles: '',
      options: status,
      tableData: [],
      isLoading: true,
      showDialog: false,
      total: 0,
      showTitle: '',
      routeValue: '',
      formInline: {
        user: '',
        region: ''

      },
      form: {
        page: 1, // 当前页
        pagesize: 10, // 每页条数
        pages: '',
        tagName: '',
        state: null,
        subjectID: ''
      },
      data: {}
    }
  },
  created () {
    this.apilist()
    this.data = this.$route.query
  },
  components: {
    tagsAdd
  },
  mounted () {
    this.routeValue = this.$route.query.name || ''
    if (this.$route.query.id) {
      this.apilist()
    }
  },

  methods: {
    /**
   * 跳转
   */
    buttonclick () {
      this.$router.push('/subjects/list')
    },
    /**
     * 获取标签列表
     */
    async apilist () {
      this.form.subjectID = this.data.id
      const { data } = await list({ page: this.form.page, pagesize: this.form.pagesize, subjectID: this.form.subjectID })
      console.log(data)
      this.form.page = +data.page
      this.form.pagesize = +data.pagesize
      this.total = data.counts
      this.tableData = data.items
      this.titles = `数据一共${this.total}条`
      // 加载中关闭
      this.isLoading = false
    },
    /**
     * 筛选
     */

    /**
     * 点击页码数
     */
    async handleCurrentChange (val) {
      this.form.page = val
      this.apilist()
    },
    /**
     * 每一行的行号
     */
    indexMetho (index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1
    },
    // formateFn (rom, column, cellValue, index) {
    //   // console.log(rom, column, cellValue, index)
    //   // return cellValue === 1 ? '已启用' : '已禁用'
    // },
    formateTimeFn (time) {
      // 处理时间
      return dayjs(time).format('YYYY-MM-DD')
    },
    /**
     * 删除
     */
    removeapi (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '温馨提示').then(async () => {
        await remove(id)
        // console.log(id)
        this.$message.success('删除成功')
        // 判断是最后一页，最后一个删除完成以后，跳转到倒数第二页
        this.apilist()
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
      }).catch(() => {})
    },
    // 搜索
    async search () {
      this.isLoading = true
      const { data } = await list({ tagName: this.form.tagName })
      this.total = data.counts
      this.tableData = data.items
      this.titles = `数据一共${this.total}条`
      this.form.page = +data.page
      this.form.pagesize = +data.pagesize
      // 加载中关闭
      this.isLoading = false
      // this.apilist()
    },
    // 清除
    onSubmit () {
      this.form = {
        page: 1, // 当前页
        pagesize: 10, // 每页条数
        pages: '',
        state: null,
        directoryName: ''

      }
      this.apilist()
      this.form.page = 1
    },
    // // 修改
    uptade (row) {
      this.showDialog = true
      this.$refs.ref.tatle = '修改标签'
      this.$nextTick(() => { this.$refs.ref.tagsAdd(row) })
    },
    // 添加
    tagsAdd () {
      this.showDialog = true
      this.$refs.ref.tatle = '新增标签'
    },
    async num (data) {
      data.state = data.state ? 0 : 1
      await changeState(data)
      this.$message.success('修改成功')
    }
  }
}
</script>

<style scoped lang='scss'>
.demo{
  width: 98.5%;
  height: 100%;
  margin: 10px;
  background-color: rgb(255, 254, 254);
}
.demo-form{
  display: flex;
  flex-wrap: wrap;
 align-content: space-between;
  width: 100%;
  height: 125px;
  background-color: #fff;
  padding: 15px;
}
.demo-form-inline{
  width:75% ;
  height: 50px;
  padding: 10px;
}
.demo-inline{
  width:25% ;
  height: 50px;
  padding: 10px;
  display: flex;

}
.chax{
  border: 1px solid #fff;
  background-color: #67c23a

}
.num{
  padding-right: 20px;
}
.card{
  width: 100%;
}
.page-tools {
  width: 100%;
  .tips {
    line-height: 34px;
    background: #eee;
    i {
      color: #aaa;
      margin-left: 10px;
      margin-right:10px ;
    }
  }
}
.primary{

    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
}
</style>
